<!DOCTYPE html>
<html>
<head>
	<title>Basic fotorama</title>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

	<!-- jQuery, -->
	<script src="jquery/jquery-1.10.1.min.js"></script>

	<!-- Fotorama -->
	<link  href="../out/fotorama.css" rel="stylesheet">
	<script src="../out/fotorama.js"></script>

  <script type="text/javascript">
    console = window.console || {};
    console.time = console.time || $.noop;
    console.timeEnd = console.timeEnd || $.noop;

    $(function () {
      f = $('.fotorama').data('fotorama');
    })
  </script>
</head>

<body>

<!--<p>Basic fotorama:<p>
<pre style="margin-top: -1em; margin-left: 1em;"><code>&lt;div <mark>class="fotorama"</mark>></code></pre>-->

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae consequatur cum doloribus eligendi eveniet
  facilis fugiat impedit obcaecati officiis perspiciatis, quaerat quibusdam? Aut earum eveniet odio quibusdam suscipit.
  Accusantium.</p>

<p>Accusantium alias at doloremque ea esse est excepturi facere facilis fugiat incidunt iure minus, molestias odio
  perferendis praesentium quasi quia, quod ratione recusandae repellat similique sit sunt ut, voluptas voluptates.</p>

<p>Eum facere saepe sit. Architecto aut dicta doloremque doloribus ducimus, est eum illum ipsum minus molestias nam
  natus numquam officiis optio, provident qui quidem! At eos ipsum nesciunt quis totam!</p>

<p>Delectus necessitatibus nemo recusandae! Aliquid amet atque consectetur debitis dignissimos dolor dolore dolorum eius
  enim est excepturi magni nulla porro praesentium quae, quisquam, repellat reprehenderit sapiente sunt voluptatibus!
  Magni, voluptates.</p>

<p>Aliquam amet atque cumque, distinctio eum, libero magnam minus optio, porro praesentium reprehenderit unde veniam!
  Cupiditate eaque enim est facilis harum magnam, placeat, quaerat quasi repellendus sapiente suscipit vel.
  Eligendi.</p>

<!-- Fotorama -->
<div class="fotorama"
     data-width="700"
     data-ratio="3/2"
     data-max-width="100%">
	<a href="i/okonechnikov/1-lo.jpg"></a>
	<a href="i/okonechnikov/2-lo.jpg"></a>
	<a href="i/okonechnikov/9-lo.jpg"></a>
	<a href="i/okonechnikov/6-lo.jpg"></a>
	<a href="i/okonechnikov/5-lo.jpg"></a>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium aspernatur dolorum laudantium
  maiores, nostrum voluptas. Consequatur corporis cum excepturi ipsum magnam natus numquam odio, quidem rem unde
  voluptate voluptates?</p>

<p>Alias atque eveniet, nulla obcaecati porro provident suscipit! Aliquam aspernatur dolore, dolores eaque eius enim ex
  magni modi molestias, nemo numquam officia officiis, optio perspiciatis repudiandae rerum sunt tenetur velit!</p>

<p>Accusamus alias, amet consequatur dignissimos distinctio dolore dolorem excepturi itaque optio qui quos, recusandae
  velit veritatis. Alias beatae dolor error id magnam odio officia perspiciatis suscipit. Dolore molestiae praesentium
  quibusdam.</p>

<p>Aperiam cumque incidunt ipsum libero minus nemo praesentium quod repellendus totam voluptatem. Alias aperiam corporis
  dolore dolores eum impedit inventore nam necessitatibus nesciunt nostrum nulla rem tempora tenetur, ullam ut.</p>

<p>Assumenda autem cum cumque dicta expedita, fuga, iste iure labore libero maiores molestias placeat quidem quisquam
  rerum similique sint tempore voluptatibus. Accusantium sint, ullam? Culpa praesentium ratione recusandae similique
  soluta.</p>

<!-- © -->
<p>Photos <a href="http://okonet.ru/">by Andrey Okonetchnikov</a></p>
</body>
</html>